import React, { useCallback } from 'react'
import { Text, View } from '@tarojs/components'
import ImageBackground from '@COMPONENTS/ImageBackground'
import Images from '@ASSET/Images'
import { EventsITF } from '@INTERFACES/Events'
import { onClickCustomBtn } from '@UTILS/customBtn'
import LoginVerifyBtn from '@COMPONENTS/Button/LoginVerifyBtn'
import style from './PlanGuideBottom.module.scss'

interface Props {
  data: EventsITF[];
  showLogin: () => void
}
const PlanGuideBottom: React.FC<Props> = ({ data, showLogin }) => {
  const onClick = useCallback(() => {
    onClickCustomBtn(data[0], { btnType: '定制计划-次' })
  }, [data])
  const isHasBtn = Array.isArray(data) && data.length > 0
  return (
    <ImageBackground
      src={Images.managePlan.bg_plan_guide_bottom}
      contentClassName={style.bgContainer}
    >
      <View className={style.titleContainer}>
        <View className={style.line} />
        <Text className={style.title}>我们期待与你一起</Text>
      </View>
      <Text className={style.title}>告别头痛困扰，享受生活美好</Text>
      <Text className={style.desc}>{'来自国内外著名神内、疼痛医学专家设计\n为5万+头痛患者提供专业指导和帮助'}</Text>
      {isHasBtn && (
        <LoginVerifyBtn
          onClick={onClick}
          showLogin={showLogin}
          loginSuccess={onClick}
        >
          <View className={style.btnContainer}>
            <Text className={style.btnText}>开始定制</Text>
          </View>
        </LoginVerifyBtn>

      )}
    </ImageBackground>
  )
}

export default PlanGuideBottom
